﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>预（决）算清单</title>
    <style>
        * {
            font-size: 14px;
            margin: 0;
            padding: 0;
        }

        .main {
            width: 85%;
            margin: 0 auto;
        }

        table {
            border: 1px solid black;
            border-spacing: 0px;
            /*合并边框*/
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
        }

        h2 {
            text-align: center;
            font-size: 30px;
            padding: 8px 0;
        }

        .add td, .add th {
            border: solid 1px #000000 !important;
        }

        .tHead {
            text-align: center;
            padding-bottom: 8px;
        }
    </style>
</head>

<body>

    <div id="print">
        <div class="main">
            <h2>家园装饰工程有限公司工程预（决）算清单</h2>
            <div class="tHead" id="tHead">
                <span>客户名称：</span>
                <span style="padding-right: 30px;" id="customerName"></span>
                <span>工程地点：</span>
                <span style="padding-right: 30px;" id="address"></span>
                <span>建筑面积：</span>
                <span style="padding-right: 30px;" id="area"></span>
                <span>公司：</span>
                <span>家园装饰</span>
            </div>
            <table class="table table-bordered add" style="font-size: 9px;">
                <tbody>
                    <tr>
                        <td rowspan="2" align="center" valign="middle">编号</td>
                        <td rowspan="2" align="center" valign="middle">材料</td>
                        <td colspan="4" align="center">工程造价</td>
                        <td colspan="2" align="center">单位价值</td>
                        <td rowspan="2" align="center">备 注</td>
                    </tr>
                    <tr id="details">
                        <td align="center">单位</td>
                        <td align="center">数量</td>
                        <td align="center">单价</td>
                        <td align="center">金额</td>
                        <td align="center">主材</td>
                        <td align="center">人工</td>
                    </tr>

                    <tr>
                        <td colspan="12" id="total"></td>
                    </tr>
                    <tr>
                        <td colspan="7">备注：</td>
                        <td colspan="1">经办人：</td>
                        <td colspan="1">客户签名：</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="/layuimini-v2/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        //从sessionStorage到订单id
        var orderId = sessionStorage.getItem('orderId');
        //获取需要打印的数据
        $.ajax({
            url: "/Orders/GetPrintData",
            type: "get",
            data: {
                orderId: orderId
            },
            success: function (res) {
                console.log(res.data);
                var data = res.data;
                $("#customerName").text( data.customerName);
                    $("#address").text( data.customPhone);
                        $("#area").text(data.area);
                        //需要添加的内容
                        var html = ``;
                        var total = 0;
                        for(var i =0;i<data.orderDetails.length;i++){
                            var r = data.orderDetails[i].remark == null ? "" :data.orderDetails[i].remark
                            html+=`<tr>
                                        <td align="center">`+(i+1)+`</td>
                                                <td align="center">`+data.orderDetails[i].materialName+`</td>
                                                <td align="center">`+data.orderDetails[i].unit+`</td>
                                                <td align="center">`+data.orderDetails[i].number+`</td>
                                                <td align="center">`+data.orderDetails[i].price+`</td>
                                                <td align="center">`+data.orderDetails[i].total+`</td>
                                                <td align="center">`+data.orderDetails[i].priceMain+`</td>
                                                <td align="center">`+data.orderDetails[i].priceArtificial+`</td>
                                                <td align="left">`+r+`</td>
                                    </tr>`
                             total+=data.orderDetails[i].total;
                        }
                        //在元素后面添加内容
                        $("#details").after(html);
                        //小计
                        $("#total").text("小计："+total+"元(￥)");
                    }
                })
    </script>
</body>
</html>